<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../stores'

const userStore = useUserStore()
const { loginAction } = userStore

const username = ref('')
const getAvatar = (e) => {
  document.querySelector('.active').classList.remove('active')
  e.target.classList.add('active')
}
const goChat = () => {
  if (!username.value) {
    ElMessage.error('用户名不能为空')
    return
  }
  const useravatar = document.querySelector('.active').src
  loginAction({ username: username.value, useravatar })
}

// on时间注册一次就好了，所以不能写在gochat函数里，会频繁触发
// onMounted(() => {
//   socket.on('isExist', (data) => {
//     if (data.state) {
//       ElMessage.error(data.msg)
//     } else {
//       ElMessage.success(data.msg)
//       //   clearTimeout(timer)
//       setTimeout(() => {
//         router.push('/chat')
//       }, 1000)
//     }
//   })
// })
// onBeforeUnmount(() => {
//   socket.off('isExist')
// })
</script>

<template>
  <section>
    <el-row type="flex" justify="center" align="middle" style="height: 100vh">
      <!-- 响应式：小屏占 20 栅格，中屏占 12，大屏占 8 -->
      <el-col :xs="20" :sm="16" :md="12" :lg="8" :xl="6" class="col">
        <h2 style="text-align: center">畅所欲言聊天室</h2>
        <el-form>
          <el-form-item label="请输入昵称：">
            <el-input v-model.trim="username"></el-input>
          </el-form-item>
          <el-form-item label="请选择头像："> </el-form-item>
          <div class="avatar">
            <el-row :gutter="10" style="height: 50%; margin-bottom: 5px">
              <el-col :span="6"
                ><img
                  class="active"
                  src="@/assets/img1.png"
                  @click="getAvatar"
                  alt=""
              /></el-col>
              <el-col :span="6"
                ><img src="@/assets/img2.png" @click="getAvatar" alt=""
              /></el-col>
              <el-col :span="6"
                ><img src="@/assets/img3.png" @click="getAvatar" alt=""
              /></el-col>
              <el-col :span="6"
                ><img src="@/assets/img4.png" @click="getAvatar" alt=""
              /></el-col>
            </el-row>
            <el-row :gutter="10" style="height: 50%">
              <el-col :span="6"
                ><img src="@/assets/img5.png" @click="getAvatar" alt=""
              /></el-col>
              <el-col :span="6"
                ><img src="@/assets/img6.png" @click="getAvatar" alt=""
              /></el-col>
              <el-col :span="6"
                ><img src="@/assets/img7.png" @click="getAvatar" alt=""
              /></el-col>
              <el-col :span="6"
                ><img src="@/assets/img8.png" @click="getAvatar" alt=""
              /></el-col>
            </el-row>
          </div>
          <!-- el-form里面的按钮默认是submit类型，需要将类型改成button -->
          <el-form-item label="">
            <button type="button" @click="goChat">登录</button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </section>
</template>

<style scoped>
section {
  height: 100vh;
  width: 100vw;
}
.col {
  /* background-color: pink; */
  min-height: 300px; /* 给个最小高度，避免太小 */
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0px 5px 5px #999;
}
.nickname {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: end;
}
.avatar {
  height: 170px;
  border: 1px solid #999;
  padding: 5px 10px 10px 10px;
  /* background-color: ; */
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar .el-col {
  height: 100%;
}
button {
  color: white;
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
  border: none;
  height: 40px;
  background-color: rgb(29, 170, 29);
}
.active {
  border: 2px solid rgb(21, 186, 21);
}
</style>
